<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery圆角可自由伸缩的Tab选项卡DEMO演示</title>

<style type="text/css">
	.clearfix:after, .container:after, .tab-nav:after {
	  content: ".";
	  display: block;
	  height: 0;
	  clear: both;
	  visibility: hidden;
	}

	/* ==========
	   Setup Page */
	*, *:before, *:after {
	  box-sizing: border-box;
	}

	body {
	  font-family: 'Quicksand', sans-serif;
	}

	/* =================
	   Container Styling */
	.container {
	  position: relative;
	  background: white;
	  padding: 3em;
	}

	/* ===========
	   Tab Styling */
	.tab-group {
	  position: relative;
	  border: 1px solid #eee;
	  margin-top: 2.5em;
	  border-radius: 0 0 10px 10px;
	}
	.tab-group section {
	  opacity: 0;
	  height: 0;
	  padding: 0 1em;
	  overflow: hidden;
	  transition: opacity 0.4s ease, height 0.4s ease;
	}
	.tab-group section.active {
	  opacity: 1;
	  height: auto;
	  overflow: visible;
	}

	.tab-nav {
	  list-style: none;
	  margin: -2.5em -1px 0 0;
	  padding: 0;
	  height: 2.5em;
	  overflow: hidden;
	}
	.tab-nav li {
	  display: inline;
	}
	.tab-nav li a {
	  top: 1px;
	  position: relative;
	  display: block;
	  float: left;
	  border-radius: 10px 10px 0 0;
	  background: #eee;
	  line-height: 2em;
	  padding: 0 1em;
	  text-decoration: none;
	  color: grey;
	  margin-top: .5em;
	  margin-right: 1px;
	  transition: background .2s ease, line-height .2s ease, margin .2s ease;
	}
	.tab-nav li.active a {
	  background: #6EB590;
	  color: white;
	  line-height: 2.5em;
	  margin-top: 0;
	}
</style>

<script src="js/prefixfree.min.js"></script>


</head>
<body>
<div class="htmleaf-container">
	<div class="container">
	  <div class="tab-group">
		<section id="tab1" title="方向">
		   <h3>方向</h3>
                 <input  class="btn btn-default btn-lg ripple" type = "submit" value = "前进" name = "car01_ONA"/>
                 <input  class="btn btn-primary btn-lg ripple" type = "submit" value = "后退" name = "car01_ONB"/>
                 <input  class="btn btn-success btn-lg ripple" type = "submit" value = "左转" name = "car01_ONC"/>
                 <input  class="btn btn-info btn-lg ripple"    type = "submit" value = "右转" name = "car01_OND"/>
                 <input  class="btn btn-warning btn-lg ripple" type = "submit" value = "停止" name = "car01_ONF"/>
				 
                  &nbsp&nbsp&nbsp
    一号小车<input type = "checkbox" name = "car[]" value = "'car01'"/>
    <Br/>
    <Br/>
    <input  class="btn btn-default btn-lg ripple" type = "submit" value = "前进" name = "car02_ONA"/>
    <input  class="btn btn-primary btn-lg ripple" type = "submit" value = "后退" name = "car02_ONB"/>
    <input  class="btn btn-success btn-lg ripple" type = "submit" value = "左转" name = "car02_ONC"/>
    <input  class="btn btn-info btn-lg ripple"    type = "submit" value = "右转" name = "car02_OND"/>
    <input  class="btn btn-warning btn-lg ripple" type = "submit" value = "停止" name = "car02_ONF"/>
    &nbsp&nbsp&nbsp
    二号小车<input type = "checkbox" name = "car[]" value = "'car02'"/>
    <Br/>
    <Br/>
    <input  class="btn btn-default btn-lg ripple" type = "submit" value = "前进" name = "car03_ONA"/>
    <input  class="btn btn-primary btn-lg ripple" type = "submit" value = "后退" name = "car03_ONB"/>
    <input  class="btn btn-success btn-lg ripple" type = "submit" value = "左转" name = "car03_ONC"/>
    <input  class="btn btn-info btn-lg ripple"    type = "submit" value = "右转" name = "car03_OND"/>
    <input  class="btn btn-warning btn-lg ripple" type = "submit" value = "停止" name = "car03_ONF"/>
    &nbsp&nbsp&nbsp
    三号小车<input type = "checkbox" name = "car[]" value = "'car03'"/>
    <Br/>
    <Br/>
    <input  class="btn btn-default btn-lg ripple" type = "submit" value = "前进" name = "car04_ONA"/>
    <input  class="btn btn-primary btn-lg ripple" type = "submit" value = "后退" name = "car04_ONB"/>
    <input  class="btn btn-success btn-lg ripple" type = "submit" value = "左转" name = "car04_ONC"/>
    <input  class="btn btn-info btn-lg ripple"    type = "submit" value = "右转" name = "car04_OND"/>
    <input  class="btn btn-warning btn-lg ripple" type = "submit" value = "停止" name = "car04_ONF"/>
    &nbsp&nbsp&nbsp
    四号小车<input type = "checkbox" name = "car[]" value = "'car04'"/>
    <Br/>
    <Br/>
    <input  class="btn btn-default btn-lg ripple" type = "submit" value = "全部前进" name = "car_all_advance"/>
    <input  class="btn btn-primary btn-lg ripple" type = "submit" value = "全部后退" name = "car_all_back"/>
    <input  class="btn btn-success btn-lg ripple" type = "submit" value = "全部左转" name = "car_all_left"/>
    <input  class="btn btn-info btn-lg ripple"    type = "submit" value = "全部右转" name = "car_all_right"/>
    <input  class="btn btn-warning btn-lg ripple" type = "submit" value = "全部停止" name = "car_all_stop"/>
    &nbsp&nbsp
    &nbsp&nbsp <Br/>
    <Br/>
		</section>
		<section id="tab2" title="温度">
		  <img src=../zhexian1.php>
           <img src=../zhexian2.php>
            <img src=../zhexian3.php>
             <img src=../zhexian4.php>
		</section>
		<section id="tab3" title="距离">
		  
		</section>
		
	  </div>
	</div>
</div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-tab.js"></script>
<script type="text/javascript">
	$(function(){
		// Calling the plugin
		$('.tab-group').tabify();
	})
</script>

<div style="text-align:center;clear:both;margin-top:80px">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
</body>
</html>